<template>
  <el-tooltip :open-delay="800" placement="top" effect="dark">
    <div slot="content" style="max-width: 200px;display: flex;flex-wrap: wrap;">
      <template v-for="(item, index) in userList">
        <CheckUser
          v-if="item"
          :key="item[keyName]"
          :user-id="item[keyName]"
          :placement="placement"
          :container-tag="containerTag"
          :current-user="currentUser"
          :is-mobile-page="isMobilePage"
        >
          <span style="cursor: pointer; color: #406eff">{{ item[labelName] }}<template v-if="index < userList.length-1">，</template></span>
        </CheckUser>
      </template>

    </div>
    <div class="ellipsisOne">{{ name }}</div>
  </el-tooltip>
</template>

<script>
import CheckUser from './checkUser.vue';
import { mapState } from 'vuex';

export default {
  name: 'CheckMultipleUser',
  components: { CheckUser },
  props: {
    userList: { // 如果 multiple 为 true，则数据从这个列表取
      type: Array,
      default: null
    },
    keyName: { // 如果 multiple 为 true，指明 userList 中哪个字段为 userId
      type: String,
      default: 'id'
    },
    labelName: { // 如果 multiple 为 true，指明 userList 中哪个字段为 userName
      type: String,
      default: 'userName'
    },
    placement: {
      type: String,
      default: 'top'
    },
    containerTag: {
      type: String,
      default: null
    }
  },
  computed: {
    ...mapState({
      'currentUser': state => state.user.userInfo,
      'isMobilePage': state => state.app.showMobilePage
    }),
    name() {
      return this.userList.map(i => i && i[this.labelName]).filter(i => !!i).join(',');
    }
  }
};
</script>
